<!DOCTYPE html>
<html lang="en">
    <head>
        <title>TensorSpace - AlexNet Demo</title>
        <meta charset="UTF-8">
        <meta name="author" content="zchholmes / https://github.com/zchholmes">
        <meta name="author" content="syt123450 / https://github.com/syt123450">
        <style>

            html, body {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }

            #container {
                width: 100%;
                height: 100%;
            }

            #loadingPanel {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: #fff;
                z-index: 2;
            }

            #loading {
                position: fixed;
                width: 30%;
                top: 150px;
                margin-left: 35%;
            }

        </style>
    </head>
    <body>

        <div id="container"></div>
        <div id="loadingPanel">
            <img id="loading" src="./assets/loading.gif">
        </div>

        <script src="../lib/jquery.min.js"></script>
        <script src="../lib/three.min.js"></script>
        <script src="../lib/stats.min.js"></script>
        <script src="../lib/tween.min.js"></script>
        <script src="../lib/TrackballControls.js"></script>
        <script src="../lib/tf.min.js"></script>
        <script src="../../dist/tensorspace.js"></script>

        <script src="data/imagenet_result.js"></script>

        <script>

            let modelContainer = document.getElementById("container");

            let model = new TSP.models.Sequential( modelContainer, {

				stats: true

            } );

            model.add( new TSP.layers.RGBInput() );

            model.add( new TSP.layers.Conv2d() );

            model.add( new TSP.layers.Pooling2d() );

            model.add( new TSP.layers.Conv2d() );

            model.add( new TSP.layers.Pooling2d() );

            model.add( new TSP.layers.Conv2d() );

            model.add( new TSP.layers.Conv2d() );

            model.add( new TSP.layers.Conv2d() );

            model.add( new TSP.layers.Pooling2d() );

            model.add( new TSP.layers.Dense( {

                paging: true,
                segmentLength: 400

            } ) );

            model.add( new TSP.layers.Dense( {

                paging: true,
                segmentLength: 400

            } ) );

            model.add( new TSP.layers.Output1d( {

                paging: true,
                segmentLength: 400,
                outputs: result

            } ) );

            model.load( {

                type: "tensorflow",
                url: "./alexnet/model.json",
                outputsName: [ "norm1", "pool1", "norm2", "pool2", "conv3_1", "conv4_1", "conv5_1", "pool5", "Relu", "Relu_1", "Softmax" ]

            } );

            model.init( function() {

				$.ajax( {

					url: "./data/macaw.json",
					type: 'GET',
					async: true,
					dataType: 'json',
					success: function ( data ) {

						model.predict( data );
						$( "#loadingPanel" ).hide();

					}

				} );

            } );

        </script>
    </body>
</html>
